<template>
	<view>
		<view class="auth">
			<view class="wanl-title">欢迎注册账号</view>
			<form @submit="formSubmit">
				<view>
					<view style="font-size: 20px;margin: 10px 0;">推荐码（分享人）：</view>
					<view class="auth-group radius-bock bg-gray wlian-grey-light">
						<input 
							placeholder="请输入推荐吗" 
							type="number" maxlength="4" 
							confirm-type="next" 
							placeholder-class="placeholder" 
							name="pidmobile"
							v-model="pidmobile"
							@input="onKeyInput"
						></input>
			     	</view>
				</view>
				<view>
					<view style="font-size: 20px;margin: 10px 0;">你的手机号：</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input 
						placeholder="请输入手机号" 
						type="number" maxlength="11" 
						confirm-type="next" 
						placeholder-class="placeholder" 
						name="mobile"
						v-model="mobile"
						@input="onKeyInput"
					></input>
				</view>
				</view>
			
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" formType="submit" :disabled="submitDisabled">获取验证码</button>
				</view>
				<!-- 同意服务条款 -->
		<!-- 同意服务条款 -->
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view>
						我已阅读<text @tap="onDetails(10, '用户协议及隐私权保护声明')">用户协议及隐私权保护声明</text>
					</view>
				</checkbox-group>
			</form>
		</view>
		<view class="auth-foot">
			<view class="menu text-grey">
				<text @tap="auth">登录</text>
				<text @tap="help">帮助</text>
			</view>
		</view>
	</view>
</template>
<script>
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
	data() {
		return {
			submitDisabled: true,
			title: '表单验证',
			pageroute: '',
			mobile: '',
			checked: 0,
			pidmobile:'',
			lat:0,
			lon:0
		};
	},
	onLoad(options) {
		this.pageroute = options.url;
		if (options.mobile) {
			this.mobile = options.mobile;
			this.submitDisabled = false;
		}
	},
	methods: {
	
		CheckboxChange(e) {
			this.checked = e.detail.value;
		},
		onKeyInput: function(e) {
			this.submitDisabled = false
		},
		getAuthorize() {
			console.log(11);
			return new Promise((resolve, reject) => {
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						resolve(); // 允许授权
					},
					fail: () => {
						reject(); // 拒绝授权
					},
				});
			});
		},
		// 确认授权后，获取用户位置
		getLocationInfo() {
			console.log('+++');
			const that = this;
			uni.getLocation({
				type: "gcj02",//GCJ-02
				isHighAccuracy:true,
				success: function(res) {
					console.log(res);
					uni.request({
						url: '/wanlshop/user/addUseLog',
						method:'POST',
						data: {
							lon:res.longitude,
							lat:res.latitude,
							mobile:that.mobile
						},
						success: res => {
							console.log(res);
						}
					});	
				},
			});
		},
		// 拒绝授权后，弹框提示是否手动打开位置授权
		openConfirm() {
			return new Promise((resolve, reject) => {
				uni.showModal({
					title: "请求授权当前位置",
					content: "我们需要获取地理位置信息，以便更好地为您服务",
					success: (res) => {
						if (res.confirm) {							
							uni.openSetting().then((res) => {
								if (res[1].authSetting["scope.userLocation"] === true) {
									resolve(); // 打开地图权限设置
								} else {
									reject();
								}
							});							
						
						} else if (res.cancel) {
							reject();
						}
					},
				});
					resolve();
			});
		},
		// 彻底拒绝位置获取
		rejectGetLocation() {
			uni.showToast({
				title: "您拒绝了授权，无法获得周边信息",
				icon: "none",
				duration: 2000,
			});
		},
		formSubmit: function(e) {
			if(this.checked == 2){
				//定义表单规则
				var rule = [
					{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.request({
						url: '/wanlshop/validate/check_mobile_available',
						data: {
							mobile: this.mobile
						},
						// 1.1.8 升级
						complete: res => {
							console.log(res);
							if(res.data == null){
								// if(this.pidmobile == ''){
									
								// 	const that = this;
								// 	uni.getLocation({
								// 		type: "gcj02",//GCJ-02
								// 		isHighAccuracy:true,
								// 		success: function(res) {
								// 			console.log(res);
								// 			uni.request({
								// 				url: '/wanlshop/user/addUseLog',
								// 				method:'POST',
								// 				data: {
								// 					lon:res.longitude,
								// 					lat:res.latitude,
								// 					mobile:that.mobile
								// 				},
								// 				success: res => {
								// 					console.log(res);
								// 				}
								// 			});	
								// 		},
								// 		fail: function(res) {
								// 			// #ifdef H5
								// 				that.getLocationInfo();
								// 			// #endif
											
								// 			// #ifdef APP-PLUS
								// 				that.$wanlshop.openGps.then(() => {
								// 					that.getLocationInfo();
								// 				}).catch(() => {
								// 					that.rejectGetLocation();
								// 				});
								// 			// #endif
								// 			//   初次位置授权
								// 			// #ifdef MP-WEIXIN								
								// 			uni.authorize({
								// 				scope: "scope.userLocation",
								// 				success: () => {
								// 					that.getLocationInfo();
								// 				},
								// 				fail: () => {										
								// 					//   //不同意给出弹框，再次确认
								// 					// that.openConfirm().then(() => {
								// 					// 	that.getLocationInfo();
								// 					// }).catch(() => {
								// 					// 	that.rejectGetLocation();
								// 					// });
								// 					that.rejectGetLocation();
								// 				},
								// 			});								
								// 			// #endif
								// 		}
								// 	});
								
								// }
							
								this.$wanlshop.to(`validcode?event=register&mobile=${e.detail.value.mobile}&pidmobile=${this.pidmobile}&url=${this.pageroute}`,'slide-in-bottom',200);
							}else{
								uni.showModal({
								    title: '手机号已被注册',
								    content: '点击确定使用手机号登录',
								    success: (msg)=> {
								        if (msg.confirm) {
								           this.$wanlshop.to(`phone?mobile=${e.detail.value.mobile}&url=${this.pageroute}`,'slide-in-bottom',200);
								        } else if (msg.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
							}
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}else{
				this.checked = 1;
				setTimeout(() => {
					this.checked = 0;
					this.$wanlshop.msg('请先同意用户协议和隐私保护声明');
				}, 300)
			}
		},
		auth() {
			this.$wanlshop.to(`auth?url=${this.pageroute}`);
		},
		help() {
			this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
		}
	}
};
</script>

<style>
	@import url("auth.css");
</style>
